import { defineView } from "@/routers/tools.mjs";

// angular.module('exampleNgOn', [])
// .component('main', {
//   templateUrl: 'main.html',

// .component('childComponent', );
/**
 * @type {DefineView}
 */
const NgOnView = defineView({
  controller: class NgOnViewCtrl {
    constructor() {
      /**
       * @type {string[]}
       */
      this.eventLog = [];
    }

    /**
     * @param {Event & {detail: string}} $event
     */
    listener($event) {
      this.eventLog.push(
        `Event with type "${$event.type}" fired at ${$event.detail}`,
      );
    }
  },
  controllerAs: "NgOnViewCtrl",
  template: /* HTML */ html`
    <child-component ng-on-custom_type="NgOnViewCtrl.listener($event)">
    </child-component
    ><br />
    <div>
      Event log:
      <p
        ng-repeat="l in NgOnViewCtrl.eventLog track by $index"
        class="bg-green-400"
        ng-bind="l"
      ></p>
    </div>
  `,
});

export default NgOnView;
